<template>
  <div class="dashboard-container">
    <!-- <h1>{{ total }}</h1> -->
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <el-row class="top">
      <el-col :span="18">
        <div class="top-left">
          <el-row class="statistics">
            <el-col :span="13">
              <div class="list">
                <div class="header">
                  <div class="title">
                    工单统计
                    <span>{{ startTime }}~ {{ endTime }}</span>
                  </div>
                </div>
                <div class="body">
                  <div class="stats">
                    <div class="item first">
                      <div class="num">{{ total }}</div>
                      <div class="text">工单总数（个）</div>
                    </div>
                  </div>
                  <div class="stats">
                    <div class="item">
                      <div class="num">{{ completedTotal }}</div>
                      <div class="text">完成工单（个）</div>
                    </div>
                  </div>
                  <div class="stats">
                    <div class="item">
                      <div class="num">{{ progressTotal }}</div>
                      <div class="text">运行工单（个）</div>
                    </div>
                  </div>
                  <div class="stats">
                    <div class="item">
                      <div class="num">{{ cancelTotal }}</div>
                      <div class="text">取消工单（个）</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="sale">
                <div class="box">
                  <div class="title">
                    销售统计
                    <span class="sub-title">{{ startTime }}~ {{ endTime }}</span>
                  </div>
                  <div class="body">
                    <div class="status">
                      <div class="item">
                        <div class="num">{{ orderNum }}</div>
                        <div class="text">订单量（个）</div>
                      </div>
                    </div>
                    <div class="status">
                      <div class="item sale-price">
                        <div class="num">{{ orderMoney }}</div>
                        <div class="text">销售额（万元）</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <div class="chart-box">
              <div class="header">
                <div class="title">
                  销售数据
                  <span class="sub-title">{{ showtime }} ~ 2023.03.18</span>
                </div>
                <div class="week-month-year">
                  <div class="item" :class="{isChecked:classType==='week'}" @click="saleData('week')">周</div>
                  <div class="item" :class="{isChecked:classType==='month'}" @click="saleData('month')">月</div>
                  <div class="item" :class="{isChecked:classType==='year'}" @click="saleData('year')">年</div>
                </div>
              </div>
              <div class="charts">
                <div ref="chart1" class="chart">1</div>
                <div ref="chart2" class="chart">2</div>
              </div>
            </div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="bottom">
          <el-row>
            <el-col :span="14">
              <div class="bottom-left">
                <div class="box">
                  <div class="header">
                    <div class="title">合作商点位数Top5</div>
                    <div class="icon"><i class="el-icon-more" /></div>
                  </div>
                  <div class="echart">
                    <div ref="box" class="pic">1</div>
                    <div class="info">
                      <div class="info-box">
                        <div class="first-box">
                          <div class="num">16</div>
                          <span class="point">点位数</span>
                        </div>
                        <div>
                          <div class="num">5</div>
                          <span class="point">合作商数</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="bottom-right">
                <div class="equipment">
                  <div class="header">
                    <div class="title">异常设备监控</div>
                    <div class="icon"><i class="el-icon-more" /></div>
                  </div>
                  <div class="empty">
                    <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
                    <div class="tips">暂无数据</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import { partnerPoint, workListStatistics, orderCount, orderAmount, saleAmount } from '@/api/worktable.js'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
  name: 'Dashboard',
  data() {
    return {
      pointOption: {
        series: [
          {
            type: 'pie',
            radius: [30, 100],
            center: ['50%', '50%'],
            roseType: 'edge',
            data: []
          }
        ]
      },
      startTime: null,
      endTime: null,
      start: null,
      end: null,
      listStatistics: [],
      // 订单量
      orderNum: null,
      // 销售额
      orderMoney: null,
      params: {
        collectType: 1,
        start: moment().startOf('week').format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD')
      },
      classType: 'week',
      showtime: moment().startOf('week').format('YYYY-MM-DD'),
      trendOption: {
        lineStyle: {
          color: 'red'
        },
        title: {
          left: 'center',
          text: '销售额趋势图'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          name: '单位:元'
        },
        series: [
          {
            symbol: 'circle', // 折线点设置为实心点
            itemStyle: {
              normal: {
                color: 'white', // 折线点的颜色
                borderColor: 'red', // 拐点边框颜色
                borderWidth: 2 // 拐点边框大小
              }
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      }

    }
  },
  computed: {
    ...mapGetters(['name']),
    total() {
      return this.listStatistics.reduce((prev, item, index, arr) => {
        return prev + item.total
      }, 0)
    },
    completedTotal() {
      return this.listStatistics.reduce((prev, item, index, arr) => {
        return prev + item.completedTotal
      }, 0)
    },
    progressTotal() {
      return this.listStatistics.reduce((prev, item, index, arr) => {
        return prev + item.progressTotal
      }, 0)
    },
    cancelTotal() {
      return this.listStatistics.reduce((prev, item, index, arr) => {
        return prev + item.cancelTotal
      }, 0)
    }
  },

  mounted() {
    // 1. 准备一个有宽高的盒子
    // 2. echarts.init 初始化一个 echart 实例
    // 3. 准备好 对应的 option
    // 4. setOption 就可以
  },
  created() {
    this.partnerPoint()
    // 在这里面 拿不到组件dom渲染, 说明是对的 但是在里面写方法 方法里面可以拿到异步的数据 例如ref dom操作之类的
    // console.log(this.$refs.box, 'created') // 打印的是undfied
    this.workListStatistics()
    this.orderCount()
    this.orderAmount()
    this.saleAmount()
  },
  methods: {
    async  partnerPoint() {
      const res = await partnerPoint()
      this.pointOption.series[0].data = res
      // this.$set(this.option.series[0], 'data', res)
      const myChart = echarts.init(this.$refs.box)
      // console.log(this.$refs.box, 'methods')
      // 绘制图表
      myChart.setOption(this.pointOption)
    },
    async  workListStatistics() {
      // console.log(moment().format('YYYY-MM-DD HH:mm:ss'), 'start')
      // console.log(moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'), 'end')
      const start = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
      const end = moment().format('YYYY-MM-DD HH:mm:ss')
      this.startTime = moment(start).format('YYYY-MM-DD')
      this.endTime = moment(end).format('YYYY-MM-DD')
      this.start = start
      this.end = end
      const res = await workListStatistics(this.start, this.end)
      // console.log(res, 'workListStatistics')
      this.listStatistics = res
    },
    async orderCount() {
      // const start = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
      // const end = moment().format('YYYY-MM-DD HH:mm:ss')
      const res = await orderCount(this.start, this.end)
      // console.log(res, 'orderCount')
      this.orderNum = res
    },
    async  orderAmount() {
      // const start = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
      // const end = moment().format('YYYY-MM-DD HH:mm:ss')
      const res = await orderAmount(this.start, this.end)
      // console.log(res, 'orderAmount')
      this.orderMoney = (res / 1000000).toFixed(2)
    },
    async  saleAmount() {
      const res = await saleAmount(this.params)
      console.log(res, 'saleAmount')
      const list = res.series.map((item) => {
        return Math.ceil(item / 100)
      })
      // console.log(list, '销售额取整')
      this.trendOption.series[0].data = list
      this.trendOption.xAxis.data = ['星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      const myChart = echarts.init(this.$refs.chart1)
      myChart.setOption(this.trendOption)
    },
    saleData(type) {
      if (type === 'week') {
        this.classType = type
        this.params = {
          collectType: 1,
          start: moment().startOf('week').format('YYYY-MM-DD'),
          end: moment().format('YYYY-MM-DD')
        }
        this.showtime = moment().startOf('week').format('YYYY-MM-DD')
        this.saleAmount()
      } else if (type === 'month') {
        this.classType = type
        this.params = {
          collectType: 1,
          start: moment().startOf('month').format('YYYY-MM-DD'),
          end: moment().format('YYYY-MM-DD')
        }
        this.showtime = moment().startOf('month').format('YYYY-MM-DD')
        this.saleAmount()
      } else if (type === 'year') {
        this.classType = type
        this.params = {
          collectType: 2,
          start: moment().startOf('year').format('YYYY-MM-DD'),
          end: moment().format('YYYY-MM-DD')
        }
        this.showtime = moment().startOf('year').format('YYYY-MM-DD')
        this.saleAmount()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  background-color: #f9fafd;
  padding: 5px;
  .top{
     width: 100%;
     height: 538px;
     background-color: pink;
    ::v-deep .el-col-18 {
    background-color: rgb(148, 196, 136);
    height: 100%;
    display: flex;
    .top-left{
      width: 100%;
       .statistics{
      margin-top: 10px;
      // padding: 10px;
      height: 165px;
      // background-color: rgb(59, 218, 204);
      width:100%;
      .list{
      width: 600px;
      padding:10px;
      // border-radius: 10px;
      // background: rgb(22, 194, 224);
      background-color:#ebf3fe;
      height: 155px;
      box-sizing: border-box;
      border-radius: 5px;
      .header{
       .title{
       font-size: 16px;
       span{
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #999;
       }
       }
      }
      .body{
         width: 600px;
        padding-top: 15px;
        box-sizing: border-box;
        display: flex;
       .stats{
         width: 25%;
         display: flex;
          .item{
            width: 115px;
            padding-right:15px;
            .item.first {
              margin-left: 10px;
            }
          .num{
            text-shadow: 2px 4px 7px rgba(85,132,255,.5);
            height: 50px;
            font-size: 36px;
            font-family: PingFangSC-Semibold,PingFang SC;
            font-weight: 600;
            line-height: 50px;
          }
          .text{
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular,PingFang SC;
          font-weight: 400;
          color: #91a7dc;
          line-height: 17px
          }
        }
       }
      }
      }
      .sale{
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        .box{
          margin-left: 10px;
          display: flex;
          flex-direction: column;
           height: 155px;
           border-radius: 20px;
          //  background-color: rgb(173, 229, 187);
          background-color:#f9efea;
           padding: 20px;
             .title{
            display: flex;
            box-sizing: border-box;
            align-items: center;
            flex: 1;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            .sub-title{
            margin-left: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #999;
            // color: red;
            box-sizing: border-box;
            }

           }
           .body{
             display: flex;
             box-sizing: border-box;
             flex:1;
             .status{
               display: flex;
               box-sizing: border-box;
               flex: 1;
               justify-content: center;
               align-items: center;
               .item{
                 display: inline-flex;
                 flex-direction: column;
                  box-sizing: border-box;
               }
                // .sale-price{
                    .num{
                   height: 50px;
                    font-size: 36px;
                    font-family: PingFangSC-Semibold,PingFang SC;
                    font-weight: 600;
                    line-height: 50px;
                    color: #ff5757;
                    text-shadow: 2px 4px 7px rgba(255,99,85,.5);
                    }
                    .text{
                   height: 17px;
                  margin-top: 3px;
                  font-size: 12px;
                  font-family: PingFangSC-Regular,PingFang SC;
                  font-weight: 400;
                    color: #de9690;
                  line-height: 17px;
                    }

             }

           }

        }
         }
    }
    .chart-box{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    height: 350px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    .header{
      display: flex;
      .title{
        display: flex;
        align-items: center;
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        .sub-title{
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        }
      }
      .week-month-year{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 129px;
        height: 34px;
        background: rgba(233,243,255,.37);
        border-radius: 10px;
        .item{
        width: 37px;
        height: 25px;
        font-size: 14px;
        color: #9ca3b4;
        cursor: pointer;
         display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        }
        .isChecked{
        background: #fff;
        box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
        border-radius: 7px;
        font-weight: 600;
        color: #333;
        }
      }
    }
    .charts{
      display: flex;
      flex: 1;
      box-sizing: border-box;
      width: 100%;
      .chart:first-child{
        margin-right: 5px;
      }
      .chart{
     position: relative;
     display: inline-block;
     width: 50%;
     height: 100%;
     background-color: rgb(191, 236, 193);
    }
    }

}
    }

}
  }
  .bottom{
     width: 100%;
     height: 353px;
    //  background-color: skyblue;
     .bottom-left{
       width: 790px;
       height: 353px;
      //  background-color: rgb(247, 224, 228);
       .box{
          width: 790px;
         margin: 20px;
         border-radius: 10px;
         background-color: #fff;
         padding-top: 20px;
         height: 100%;
           .header{
              width: 780px;
             display: flex;
             justify-content: space-between;
             .title{
              align-items: center;
              font-size: 16px;
              font-family: PingFangSC-Semibold,PingFang SC;
              font-weight: 600;
              color: #333;
              padding-top: 10px;
            }
             }
             .echart{

                padding-top: 16px;
                display: flex;
               .pic{
                 width: 440px;
                 height: 284px;
                //  background-color: rgb(245, 217, 217);
               }
               .info{
                 width: 154px;
                 height:284px ;
                 margin-left: 15px;
                //  background-color: rgb(184, 219, 195);
                 .info-box{
                  width: 154px;
                  height:284px ;
                  background:
                  linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,
                  linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,
                  linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,
                  linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
                  background-size: 50% 50%;
                  background-repeat: no-repeat;
                   .first-box{
                     margin-bottom: 35px;
                   }
                width: 154px;
                height: 230px;
                padding-top: 47px;
                padding-left: 38px;
                 .num{
                height: 33px;
                font-size: 24px;
                font-family: PingFangSC-Semibold,PingFang SC;
                font-weight: 600;
                color: #072074;
                line-height: 33px;
                 }
                 .point{
                  height: 17px;
                  margin-top: 6px;
                  font-size: 12px;
                  font-family: PingFangSC-Regular,PingFang SC;
                  font-weight: 400;
                  color: #000412;
                  line-height: 17px
                 }
                 }

               }
             }
         }
       }
       .bottom-right{
           margin: 20px;
         box-sizing: border-box;
         padding-left: 10px;
         padding-right: 10px;
         background-color:  #f9fafd;
        //  background-color: rgb(192, 255, 231);
         width: 622px;
         height: 353px;
         margin-right: 5px;
         .equipment{
        background-color: #fff;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        min-height: 353px;
        width: 600px;
        // background: #fff;
        border-radius: 20px;
        .header{
          margin-top: 10px;
          // background-color: rgb(166, 212, 82);
          width: 560px;
          display: flex;
          box-sizing: border-box;
          padding: 15px;
          justify-content: space-between;
          .title{
          font-size: 16px;
          font-weight: 600;
          color: #333;
         }
         .icon{
          width: 16px;
          height: 16px;
          color: #5f84ff;
          cursor: pointer;
          // background-color: pink;
         }
        }
      .empty{
            // width: 480px;
            display: flex;
            flex:1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img{
              width: 123px;
              height: 96px;
            }
            .tips{
           margin-top: 25px;
           color: #20232a;
           font-size: 14px;

            }
      }
         }
       }
     }
  }
</style>
